<!-- 楼层编辑 -->
<template>
	<a-modal v-bind="options" class="floor-update-dialog">
		<a-typography-text>注：当前空格显示楼层名称，可自由编辑；可拖拽空格，改变楼层展示顺序</a-typography-text>
		<draggable class="floor-drag-container" v-if="floorList.length" v-bind="dragOptions">
			<template #item="{element}">
				<div>
					<a-input class="floor-grag-input" size="large" :maxlength="3" v-model:value="element.floorNo" />
				</div>
			</template>
		</draggable>
		<a-empty v-else />
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watchEffect} from 'vue'

	import XEUtils from 'xe-utils'
	import Draggable from 'vuedraggable-es'
	import {Building, Floor} from '@/interface/community'

	const props = defineProps<{
		visible: boolean
		building: Building
	}>()

	const emits = defineEmits(['update:visible', 'submit'])
	const floorList = ref<Floor[]>([])

	const options = reactive({
		width: '640px',
		title: '楼层编辑',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		okText: '保存',
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		},
		onOk() {
			options.onCancel()
			emits('submit', floorList.value)
		}
	})

	const dragOptions = reactive({
		list: floorList,
		itemKey: 'floor',
		animation: 300,
		onEnd() {
			floorList.value.forEach((floor, i) => (floor.floor = i + 1))
		}
	})

	watchEffect(() => {
		if (props.visible) {
			floorList.value = XEUtils.clone(props.building.floorList, true) as []
		}
	})
</script>

<style lang="less">
	.floor-update-dialog {
		.ant-modal-body {
			padding: 16px;
		}

		.floor-drag-container {
			display: grid;
			gap: 16px;
			margin-top: 16px;
			grid-template-columns: repeat(5, 1fr);

			.floor-grag-input {
				height: 50px;
				cursor: move;
				text-align: center;

				&:focus {
					cursor: text;
				}
			}
		}
	}
</style>
